<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/mall-common :: common_head(~{::title},~{::link},~{::script})">
  <title>网上图书商城</title>
  <link rel="stylesheet" href="/styles/user-center/shipping-address-manage.css">
  <script src="/javascript/user-center/shipping-address-manage.js" type="text/javascript"></script>
</head>
<body>
<div th:replace="common/mall-common::mall-header"></div>

<div class="mall-body">

  <div class="title-line">
    <div class="title">收货地址管理</div>
    <button type="button" class="btn btn-outline-primary neumall-data-add-btn">添加收货地址</button>
  </div>

  <div class="no-data" th:if="${addressList.list.size()==0}">暂无收货地址，快去添加一个吧~</div>

  <div class="shipping-address-list">
    <div class="shipping-address-item" th:each="item:${addressList.list}">
      <div class="address-text"
           th:text="${item.province+' '+item.city+' '+item.district+' '+item.detailAddress+' '+item.addrType}"></div>
      <button type="button" class="btn btn-primary edit-btn"
              th:data-province="${item.province}" th:data-city="${item.city}"
              th:data-district="${item.district}" th:data-detail-address='${item.detailAddress}'
              th:data-addrType="${item.addrType}" th:data-id="${item.id}">
        编辑
      </button>
      <button type="button" class="btn btn-danger remove-btn" th:data-id="${item.id}">
        删除
      </button>
    </div>
    <div th:replace="common/mall-common :: common_pager(${addressList})"></div>
  </div>

</div>

<div th:replace="common/mall-common::mall-footer"></div>

<!--模态框-->
<div class="modal fade" id="neumall-data-edit-modal" tabindex="-1" style="z-index: 999999">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5">收货地址信息</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form action="/addAddress" method="post">
        <input id="shipping-address-id" type="hidden" name="id" value=""/>
        <div class="modal-body">
          <div class="mb-3 row">
            <label for="inputProvince" class="col-sm-2 col-form-label">省份</label>
            <div class="col-sm-10">
              <input class="form-control" id="inputProvince" name="province">
            </div>
          </div>
          <div class="mb-3 row">
            <label for="inputCity" class="col-sm-2 col-form-label">城市</label>
            <div class="col-sm-10">
              <input class="form-control" id="inputCity" name="city">
            </div>
          </div>
          <div class="mb-3 row">
            <label for="inputDistrict" class="col-sm-2 col-form-label">区/县</label>
            <div class="col-sm-10">
              <input class="form-control" id="inputDistrict" name="district">
            </div>
          </div>
          <div class="mb-3 row">
            <label for="inputDetailAddress" class="col-sm-2 col-form-label">详细地址</label>
            <div class="col-sm-10">
              <input class="form-control" id="inputDetailAddress" name="detailAddress">
            </div>
          </div>
          <div class="mb-3 row">
            <label for="inputAddrType" class="col-sm-2 col-form-label">地址类别</label>
            <div class="col-sm-10">
              <input class="form-control" id="inputAddrType" name="addrType">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-success">提交</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="neumall-data-delete-confirm-modal" tabindex="-1" style="z-index: 999999">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5">删除</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        您确认要删除该收货地址吗？删除后的数据无法恢复
      </div>
      <form id="neumall-data-delete-confirm-form" class="modal-footer" action="/deleteAddress" method="post">
        <input type="hidden" id="neumall-data-delete-input-id" name="id" value=""/>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="submit" class="btn btn-danger">确认删除</button>
      </form>
    </div>
  </div>
</div>

</body>
</html>

